<template>
    <div class="Box">
        <Nav />
        <div class="main">
            <img class="logo" src="../assets/images/baidu.jpg" alt="">
            <div class="searchBox">
                <input type="text" class="search" @click="">
                <span class="camera">📷</span>
                <button>百度一下</button>
            </div>
            <div class="mainNav">
                <div class="left">
                    <span v-for="(item, index) in mainArr" @click="changeInfo(index)"
                        :class="{ active: index == nowIndex }" :key="index">{{
                    item }}</span>
                </div>
                <span class="customize" v-show="nowIndex == 0">+ 自定义</span>
            </div>
            <div class="concernText" v-show="nowIndex == 0">
                <div style="text-align: left;">我的导航</div>
                <img src="../assets/images/concernLogo.png" style="width: 1.04rem;" alt="">
                <div class="address">您还没有添加任何网址</div>
                <button>点击添加</button>
            </div>
            <div class="recommendText" v-show="nowIndex == 1">
                <div class="left">
                    <div class="leftText1" @mouseover="lock = true" @mouseleave="lock = false" v-for="item in reInfo">
                        <img :src="item.src" alt="">
                        <div class="leftInfo">
                            <h2>{{ item.title }}</h2>
                            <div class="leftInfoDetail">
                                <span>{{ item.time }}<span style="margin-left: 0.65rem;" v-show="lock">X</span></span>
                                <span>🔊播报</span>
                            </div>
                        </div>
                    </div>
                    <div class="leftText2" v-for="item in reInfo1">
                        <h2>{{ item.title }}</h2>
                        <div class="box">
                            <img :src="item.src" alt="">
                            <img :src="item.src" alt="">
                            <img :src="item.src" alt="">
                        </div>
                        <div class="time">
                            <span>{{ item.time }}</span>
                            <span>🔊播报</span>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="r-box">
                        <span><b>百度热搜</b> ></span>
                        <span>🌀换一换</span>
                    </div>
                    <ol>
                        <li v-for="item in hotInfo">{{ item }}</li>
                    </ol>
                </div>
            </div>
        </div>
        <Footer />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Nav from '../components/Nav.vue'
import Footer from '../components/Footer.vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const nowIndex = ref(0)
const mainArr = reactive(['我的关注', '推荐'])
const hotInfo = reactive(['三八妇女节快乐', "小情侣买2张20元彩票 挂出百万大奖", "2024中国向“新”发力", "加拿大赔偿在华被捕间谍700万加元", "张桂梅说女性可以是花也可以是山", "瑞典正式加入北约", "杭州小伙买100万黄金一年赚50%", "北京未开放个人申领三代社保卡", "公主or女王 自己说了算"])
const lock = ref(false)
const reInfo = reactive([
    { src: 'http://localhost:5173/src/assets/images/info1.jpg', title: '没收油轮上的美国石油', time: '环球时报 03-07 09:27' },
    { src: 'http://localhost:5173/src/assets/images/info2.jpg', title: '欧洲央行继续“按兵不动”', time: '财联社 03-07 23:03' }
])
const reInfo1 = reactive([
    { src: 'http://localhost:5173/src/assets/images/info1.jpg', title: '美联储“褐皮书”显示美国通胀压力仍普遍存在', time: '上观新闻 03-07 22:23' },
    { src: 'http://localhost:5173/src/assets/images/info2.jpg', title: '高爆传奇终于来了！10怪1万元宝,开局1人10狗！', time: '广告 03-07 23:03' },
    { src: '', title: '山海退出跨航司退票互认机制，减少消费者出行损失', time: '文汇报 03-07 13:52' },
    { src: '', title: '江南化工：公司持有AI企业北京光年无限12.91%股份', time: '财联社 03-07 22:06' },
    { src: '', title: '中注协会同监管机构约谈新备案会计师事务所', time: '澎湃新闻 03-07 17:54' },
])

const changeInfo = (index) => {
    nowIndex.value = index
}

// 判断是否为移动端
const isMobileFun = () => {
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (isMobile) {
        router.push('/detail')
    }
}

isMobileFun()

</script>

<style lang="scss" scoped>
.Box {
    padding: 0.16rem;
    font-size: 0.104rem;

    .main {
        padding: 0 1rem;
        text-align: center;

        .logo {
            width: 2rem;
        }

        .searchBox {
            padding: 0.13rem 0 0.5rem;
            width: 3.9rem;
            margin: 0rem auto;
            position: relative;

            .search {
                padding: 0.065rem 0rem 0.065rem 0.13rem;
                width: 100%;
                height: 0.29rem;
                border-radius: 0.052rem;
                outline-color: blue;
                border: 0.013rem solid gray;
            }

            .camera {
                position: absolute;
                top: 0.195rem;
                right: 0.846rem;
                cursor: pointer;
            }

            button {
                border: none;
                height: 0.29rem;
                padding: 0 0.13rem;
                font-size: 0.117rem;
                color: white;
                background-color: rgb(78, 110, 242);
                position: absolute;
                right: 0rem;
                border-top-right-radius: 0.052rem;
                border-bottom-right-radius: 0.052rem;
            }

            button:hover {
                cursor: pointer;
                background-color: var(--hover-otherBlue);
            }
        }

        .mainNav {
            display: flex;
            justify-content: space-between;
            padding: 0.065rem;
            color: gray;

            .left {
                span {
                    margin-right: 0.065rem;
                    padding: 0.065rem 0;
                }

                span:hover {
                    cursor: pointer;
                    color: var(--hover-black);
                }

                .active {
                    border-bottom: 0.013rem solid blue;
                    color: black;
                }
            }

            .customize:hover {
                cursor: pointer;
                color: var(--hover-black);
            }
        }

        .concernText {
            margin-top: 0.13rem;
            border-radius: 0.052rem;
            padding: 0.065rem 0.065rem 0.195rem 0.065rem;
            box-shadow: 0 0 0.0195rem 0rem gray;

            .address {
                position: relative;
                top: -0.195rem;
                color: gray;
            }

            button {
                cursor: pointer;
                padding: 0.065rem 0.1rem;
                outline: none;
                border-radius: 0.052rem;
                border: none;
                font-size: 0.104rem;
            }
        }

        .recommendText {
            display: flex;
            padding: 0.065rem;
            justify-content: space-between;

            .left {
                padding: 0.065rem 0;
                width: 4.25rem;
                text-align: left;

                .leftText1 {
                    cursor: pointer;
                    padding-bottom: 0.195rem;

                    img {
                        width: 1.497rem;
                        border-radius: 0.195rem;
                    }

                    .leftInfo {
                        display: inline-block;
                        vertical-align: top;
                        padding: 0.065rem 0 0.065rem 0.065rem;
                        width: 2.75rem;

                        h2 {
                            font-size: 0.15rem;
                            font-weight: 500;
                        }

                        .leftInfoDetail {
                            margin-top: 0.585rem;
                            display: flex;
                            color: gray;
                            justify-content: space-between;

                            span:hover {
                                color: var(--hover-blue)
                            }
                        }
                    }

                }

                .leftText2 {
                    cursor: pointer;

                    h2 {
                        font-size: 0.15rem;
                        font-weight: 500;
                        padding-bottom: 0.065rem;
                    }

                    .box {
                        border-radius: 0.078rem;
                        display: flex;
                        overflow: hidden;
                        justify-content: space-between;

                        img {
                            width: 1.43rem;
                        }
                    }

                    .time {
                        padding: 0.065rem 0 0.13rem;
                        display: flex;
                        color: gray;
                        justify-content: space-between;
                    }
                }

                .leftText1:hover,
                .leftText2:hover {
                    h2 {
                        color: var(--hover-blue);
                    }
                }
            }

            .right {
                width: 2.79rem;
                margin-top: 0.26rem;
                position: sticky;
                height: 2.60rem;
                top: 0.325rem;

                .r-box {
                    display: flex;
                    justify-content: space-between;

                    span:hover {
                        cursor: pointer;
                        color: var(--hover-blue);
                    }
                }

                ol {
                    list-style-type: decimal;
                    text-align: left;
                    margin-left: 0.13rem;
                    margin-top: 0.13rem;

                    li {
                        margin-top: 0.13rem;
                        padding-left: 0.13rem;
                    }

                    li:hover {
                        cursor: pointer;
                        color: var(--hover-blue);
                    }
                }
            }
        }
    }
}
</style>